<template>
  <div class="user">
    <div class="search">
      <el-button type="primary" size="small" @click="editRef.drawer=true">添加</el-button>
    </div>
   <el-table size="small" :data="showList" style="width: 98%">
      <el-table-column prop="username" label="账号" width="100" />
      <!-- <el-table-column prop="password" label="密码" width="150" /> -->
      <el-table-column prop="fullName" label="姓名" width="100" />
      <el-table-column prop="phoneNumber" label="手机" width="100" />
      <el-table-column prop="email" label="邮箱" width="100" />
      <el-table-column prop="sex" label="性别" width="100" />
      <el-table-column prop="registrationDate" label="注册日期" width="100"/>
      <el-table-column prop="lastLogin" label="最后登录日期" width="100" />
      <el-table-column prop="isRoot" label="是否是管理" width="100" />
<!--
      <template #default="scope">
          <el-image v-if="scope.row.photo" style="width: 60px; height: 60px" :src="'http://119.45.221.185:8003/'+'upload/admin/'+scope.row.photo" fit="cover" />
          <el-image v-else style="width: 60px; height: 60px" src="imgs/default.png" fit="cover" />
        </template> -->

      <el-table-column prop="phone" label="电话" width="100" />
      <el-table-column prop="role.roleName" label="角色" width="150" />
      <el-table-column label="操作" width='150'>
          <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.id,null)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <EditUser ref='editRef'></EditUser>
        <el-pagination style="margin-top: 5px;" small background layout="prev, pager, next"
    :total="list.length" v-model:current-page="pageIndex" />
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted,computed}from 'vue'
import { $list,$getOne} from '@/api/admin.js'
import { ElMessageBox,ElNotification } from 'element-plus'


// 页码
let pageIndex = ref(1)
let list =ref([])
// 显示的列表
let showList = computed(()=>{
  return list.value.slice((pageIndex.value-1)*10,pageIndex.value*10)
})

let editRef =ref(null)
const loadList=async()=>{
  console.log(11);

  let ret =await $list()
  console.log(ret);

  list.value=ret.data.user
}




// 表单数据
let formData = ref({
  id: 0,
  username: "",
  password: "",
  email: "",
  phoneNumber: "",
  fullName: "",
  sex: "",
  registrationDate: "",
  lastLogin: "",
  isRoot: "",
  pageNo: 1,
  pageSize: 1
})


//删除方法
const handleDelete=(id ,phone)=>{
    ElMessageBox.confirm(
    '确定删除吗？',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(async () => {
    // let ret = await $delete({id,photo})
    //       if(!ret.success){
    //       ElNotification({
    //         title: '提示',
    //         message: ret.message,
    //         type: 'success',
    //       })
    //       //重新加载
    //       loadRoles()

    //     }else{
    //       ElNotification({
    //         title: '提示',
    //         message: ret.message,
    //         type: 'error',
    //       })
    //       console.log(id)
    //     }
  })
  .catch(() => {})

}

//编辑方法
const handleEdit = async (roleId)=>{
  console.log(roleId);
    formData.value.id=roleId
      console.log(formData.value);
  let ret =await $getOne(formData.value)
  console.log(ret.data.page);
  editRef.value.drawer = true
  editRef.value.formData = ret.data.page.records
}
onMounted(()=>{
  loadList()
})

</script>


<style lang="scss" scoped>

</style>
